<template>
  <div class="content-main">
    <ul class="tab-list">
      <li class="tab-list-item" :class="{ active: activeName === item.value }" v-for="(item, index) in tabs" :key="index"
        @click="handleTabChange(item)">
        <p class="text-label" v-if="showLabel">{{ item.label }}</p>
      </li>
    </ul>
    <div class="content fc">
      <img class="icon-img" :src="activeIcon" alt="" />
    </div>
    <div class="footer fc">
      <img src="@/assets/imgs/icon-tab-right.webp" :style="{ opacity: activeName == min ? '0.4' : '1' }"
        class="tab-left-icon" alt="" @click="handleChange(1)">
      <img src="@/assets/imgs/icon-tab-right.webp" :style="{ opacity: activeName == max ? '0.4' : '1' }" class="tab-icon"
        alt="" @click="handleChange(2)">
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  tabs: any
  showLabel?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  showLabel: true
})

const activeName: any = defineModel()
const max = computed(() => {
  return Math.max(...props.tabs.map(item => { return item.value }))
})
const min = computed(() => {
  return Math.min(...props.tabs.map(item => { return item.value }))
})

const activeIcon = computed(() => {
  return props.tabs.find((item) => item.value === activeName.value)?.icon;
});

const handleTabChange = (item) => {
  activeName.value = item.value;
};
const handleChange = (type) => {
  if (type == 1 && activeName.value > props.tabs[0].value) {
    activeName.value--;
  } else if (type == 2 && activeName.value < max.value) {
    activeName.value++;
  }
}
</script>

<style scoped lang="scss">
.tab-left-icon {
  transform: rotateY(180deg);
}

.footer {
  gap: 4px;
  position: absolute;
  bottom: 50px;
  left: 50%;

  &:hover {
    cursor: pointer;
  }
}

.content-main {
  padding: 100px;
  position: relative;

  .content {
    margin: 0 auto;
    width: 100%;

    .icon-img {
      margin-top: 54px;
      width: 70%;
    }
  }

  .tab-list {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    color: rgba(127, 138, 147, 1);
    gap: 20px;

    .active {
      color: #fff;

      .text-label {
        position: relative;
        z-index: 0;

        &::before {
          top: calc(45% / 2 - 6px);
          background-color: rgba(24, 252, 222, 1);
          border: 6px solid rgba(13, 129, 116, 1);
        }
      }
    }

    &-item {
      flex: 1;
      font-family: "Microsoft YaHei Bold";
      font-weight: 700;
      font-size: 24px;
      text-align: left;

      &:hover {
        cursor: pointer;
      }

      .text-label {
        position: relative;
        z-index: 0;

        &::before {
          content: "";
          position: absolute;
          width: 17px;
          height: 17px;
          border-radius: 50%;
          background-color: rgba(14, 132, 120, 1);
          z-index: -1;
          left: -34px;
          top: calc(45% / 2);
        }
      }
    }
  }
}
</style>
